/*
 * @Author: jolen.Ding
 * @Date: 2019-08-16 11:28:50
 * @Last Modified by: jolen.Ding
 * @Last Modified time: 2019-08-21 10:03:20
 */
layui.define(['jquery', 'layer', 'element', 'laypage'], function(e) {
    "use strict";
    var $ = layui.$,
        laypage = layui.laypage,
        layer = layui.layer;

    /********************** 列表页面 **********************/
    // 筛选更多按钮点击事件
    $('.ms-item-more').each(function(index, domEle) {
        $(this).on('click', function() {
            var _this = $(this);
            var isOpen = parseInt(_this.data('open'));
            console.log(isOpen);

            if (isOpen === 0) {
                _this.data('open', '1').find('i').removeClass("layui-icon-down").addClass("layui-icon-up");
                _this.parent().addClass("showall");
            } else {
                _this.data('open', '0').find('i').removeClass("layui-icon-up").addClass("layui-icon-down");
                _this.parent().removeClass("showall");
            }
        })
    })
    $('.ms-item-option').each(function(index, domEle) {
        $(this).on('click', 'span', function() {
            var isActive = $(this).parent().hasClass('cur');

            if (!isActive) {
                $(this).parent().addClass("cur").siblings().removeClass('cur');
            }
        })
    })
    laypage.render({
        elem: 'pages',
        count: 75, //数据总数，从服务端得到
        prev: '<i class="layui-icon layui-icon-prev"></i>',
        next: '<i class="layui-icon layui-icon-next"></i>',
        layout: ['prev', 'page', 'next', 'count', 'skip'],
        theme: '#0045ad',
        jump: function (obj, first) {
            //obj包含了当前分页的所有参数，比如：
            console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
            console.log(obj.limit); //得到每页显示的条数

            //首次不执行
            if (!first) {
                //do something
            }
        }
    });
    /********************** 详情页面 **********************/
    // 切换大图
    $('.md-imglist li').on('click', function () {
        $(this).parents('.md-goods-imgbox').find('.md-goodimg img').attr('src', $(this).find('img').attr('src'));
        $(this).find('i').addClass('active').parent('li').siblings('li').find('i').removeClass('active');
    }).eq(0).find('i').addClass('active');
    // 图片放大功能
    var sm = $('.md-imgmask'),
        mask = $('.md-mousemask'),
        lgDiv = $('.md-showbox'),
        lgimg = $('.md-goodimg img'),
        scale = 3, // 缩放倍数
        w = sm.outerWidth(),
        h = sm.outerHeight();
    mask.css({
        'width': w / scale + "px",
        'height': h / scale + 'px'
    });
    sm.on('mouseenter', function () {
        mask.show();
        lgDiv.show().css('background', 'url(' + lgimg.attr('src') + ') 0 0/' + w * scale + 'px ' + h * scale + 'px no-repeat');
    }).on('mouseleave', function () {
        mask.hide();
        lgDiv.hide();
    }).on('mousemove', function (e) {
        e = e || event;
        var MaxTop = h - mask.outerHeight();
        var MaxLeft = w - mask.outerWidth();
        var x = e.offsetX,
            y = e.offsetY,
            top = y - mask.outerHeight() / 2,
            left = x - mask.outerWidth() / 2;
        if (top < 0) top = 0;
        else if (top >= MaxTop) top = MaxTop;
        if (left < 0) left = 0;
        else if (left >= MaxLeft) left = MaxLeft;
        mask.css({
            'left': left + "px",
            'top': top + 'px'
        });
        lgDiv.css('backgroundPosition', -left * scale + "px " + (-top * scale) + "px");
    });
    // end---图片放大
    e('mall', {});
});
